<template>
    <div id="moviePage" v-if="detailMovie.length != 0"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="50"
    >
        <!-- 电影详情 -->
        <div class="movie-detail" @click="actLoading()">
            <div class="mask" :style="{'background-image':`url(${picFix(detailMovie.img)})`}"></div>
            <div class="pic">
                <img :src="picFix(detailMovie.img)" alt="">
            </div>
            <div class="detail">
                <div class="title textoverS">{{detailMovie.nm}}</div>
                <div class="title-en textoverS">{{detailMovie.enm}}</div>
                <div class="grade textoverS">
                    <span v-if="detailMovie.globalReleased && detailMovie.sc!=0" style="fontSize: 18px;fontWeight: 700;color: #fc0;">{{detailMovie.sc}}<span v-if="detailMovie.sc.toString().indexOf('.') == -1">.0</span>&nbsp;</span>
                    <span v-if="detailMovie.globalReleased && detailMovie.sc!=0" style="color: #fff;">({{detailMovie.snum}}人评)</span>
                    <span v-if="detailMovie.globalReleased && detailMovie.sc==0">暂无评分</span>
                </div>
                <div class="type textoverS">
                    <span>{{detailMovie.cat}}</span> &nbsp;
                    <img src="../assets/mx1.png" alt="" v-if="detailMovie.version=='v2d imax'">
                    <img src="../assets/mx2.png" alt="" v-if="detailMovie.version=='v3d imax'">
                    <img src="../assets/mx3.png" alt="" v-if="detailMovie.version=='v3d'">
                </div>
                <div class="fra textoverS">
                    {{detailMovie.src}} / {{detailMovie.dur}}分钟
                </div>
                <div class="showTime textoverS">
                    {{detailMovie.pubDesc}}
                </div>
            </div>
            <div class="arrow fl">
                <div><img src="../assets/arrow1.png" alt=""></div>
            </div>
        </div>

        <!-- 时间表 -->
        <div class="time-table" @click="actLoading()">
            <div class="scroll">
                <div class="date" v-for="(days,index) in showDays" :key="days.date"
                    :class="{active:index == dateIndex ? true : false}"
                    @click="toActive(index,days)"
                >
                    {{myTools.dateFix(days.date)}}
                </div>
            </div>
        </div>

        <!-- 筛选 -->

        <!-- 影院列表 -->
        <div class="cinemas-list" @click="actLoading()">
            <ul>
                <li v-for="cin in cinemas" :key="random()" @click="toShows(cin.id)">
                    <div class="title-block">
                        <div class="title">
                            <span class="name">{{cin.nm}}</span>
                            <span class="sellPrice">
                                <span class="price">{{cin.sellPrice}}</span>
                                <span class="yuan">元起</span>
                            </span>
                        </div>
                        <div class="location">
                            <span class="addr textoverS">{{cin.addr}}</span>
                            <span class="distance textoverS">{{cin.distance}}</span>
                        </div>
                        <div class="label textoverS">
                            <div class="allowRefund" v-if="cin.tag.allowRefund==1">退</div>
                            <div class="endorse" v-if="cin.tag.endorse==1">改签</div>
                            <div class="snack" v-if="cin.tag.snack==1">小吃</div>
                            <div class="vipTag" v-if="cin.tag.vipTag=='折扣卡'">折扣卡</div>  
                            <div class="hallType" v-for="ht in (cin.tag.hallType)" :key="ht">{{ht}}</div> 
                        </div>
                        <div class="discount textoverS" v-if="typeof (cin.promotion.cardPromotionTag)=='string'">
                            <img src="../assets/k1.png" alt="">{{cin.promotion.cardPromotionTag}}
                        </div>
                        <div class="showTimes">
                            近期场次：{{cin.showTimes}}
                        </div>
                    </div>
                </li>
            </ul>
            <div class="more" v-if="loading == false">
                <mt-spinner type="fading-circle"
                 color="rgb(100, 100, 100)"></mt-spinner> 努力加载中...
            </div>
        </div>
            
    </div>     
</template>

<script>
import '@/scss/movie.scss';

// 将 post请求的pay load 改为 form data
import qs from 'qs';

export default {
    created () {
        // 获取今天日期
        this.day = this.today();

        this.id = this.$route.params.movieId;

        // 电影详情
        this.axios.get('/ajax/detailmovie',{
            params:{
                movieId:this.id
            }
        }).then((res)=>{
            this.detailMovie = res.data.detailMovie;

            // 提交修改hearder名
            this.$store.commit('changeHT',this.detailMovie.nm);
        });

        var timestamp = (new Date()).getTime();

        // 影院的信息
        this.getCinemas(this.day,0);
        console.log("今天的日期",this.day);

        this.loading = true;    // 无限滚动为true，禁用
    },
    data(){
        return {
            id: '',
            detailMovie: {},
            cinemas: [],
            day: '',
            offset: 0,
            loading: undefined,  
            showDays: [],
            dateIndex: 0,
        }
    },
    methods:{
        actLoading(){
            this.loading = false;   // 无限滚动为fasle，启用
        },
        toActive(index,days){
            console.log("日期",days.date);
            this.cinemas = [];
            this.offset = 0;
            this.dateIndex = index;
            this.day = days.date;
            var t = setTimeout(() => {
                this.getCinemas(days.date,0);
                clearTimeout(t);
            }, 500);
        },
        today(){
            let date = new Date();
            let y = date.getFullYear();
            let m = date.getMonth() + 1;
            let d = date.getDate();
            return y+'-'+m+'-'+d;
        },
        picFix(url){
            if(typeof url == "string"){
                return url.replace('w.h','110.150');
            }            
        },
        toShows(cinemaId){
            this.$router.push({
                name:'shows',
                params:{cinemaId:cinemaId},
                query:{movieId:this.id}
            })
        },
        getCinemas(day,offset){
            this.axios.post('/ajax/movie' ,qs.stringify({
                movieId: this.id,
                day: day,
                offset: offset,
                limit: 20,
                districtId: -1,
                lineId: -1,
                hallType: -1,
                brandId: -1,
                serviceId: -1,
                areaId: -1,
                stationId: -1,
                item: "",
                updateShowDay: true,
                reqId: 1545367192578,
                cityId: 20,
            })
            ).then((res)=>{
                // 判断请求结果 如果影院为空就代表当天无上映 需再次请求
                if(res.data.cinemas.length != 0){
                    // 已经上映
                    this.cinemas = this.cinemas.concat(res.data.cinemas);
                }else{
                    let day = res.data.showDays.dates[0].date;
                    this.getCinemas(day,0);
                }    
                console.log("获取时间表的时间",res)    
                // 获取时间表的时间
                this.showDays = res.data.showDays.dates;
                
                
            })
        },
        loadMore() {
            console.log("到底加载");       
            this.offset += 20;
            this.getCinemas(this.day,this.offset);
        },
        random(){
            return Math.random();
        }
    }
}
</script>